<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="hierarchical_data_source">
        <title>API Reference for Kendo UI Hierarchical DataSource</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn more about the configuration of Kendo UI DataSource, methods and events.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/data/hierarchicaldatasource.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/data/hierarchicaldatasource.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodatahierarchicaldatasource"><a href="#kendodatahierarchicaldatasource">kendo.data.HierarchicalDataSource</a></h1>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<p>See the <a href="/api/framework/datasource#configuration">DataSource configuration</a> for all inherited configuration.</p>

<h3 id="configuration-filter">
<a href="#configuration-filter">filter </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The filters which are applied over the data items. It applies the filter to all loaded nodes and creates views from the nodes that match the filter and their parent nodes up to the root of the hierarchy. Currently not loaded nodes are not filtered. By default, no filter is applied.</p>

<blockquote>
<p>The data source filters the data items client-side unless the <a href="/api/framework/datasource#configuration-serverFiltering"><code>serverFiltering</code></a> option is set to <code>true</code>.</p>
</blockquote>

<h4>Example - set a single filter</h4>

<pre><code>&lt;script&gt;
    var dataSource = new kendo.data.HierarchicalDataSource({
        filter:{ field: "name", operator: "startswith", value: "John" },
        change: function(e) {
             for (var i = 0; i &lt; e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { name: "Jane Doe" },
            { name: "John Doe" }
        ] },
        { name: "John Doe" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].name); // displays "John Doe"
&lt;/script&gt;
</code></pre>

<h4>Example - set filter as conjunction (and)</h4>

<pre><code>&lt;script&gt;
    var dataSource = new kendo.data.HierarchicalDataSource({
        filter:[{ field: "name", operator: "startswith", value: "John" },
            { field: "name", operator: "contains", value: "Snow" }],
        change: function(e) {
             for (var i = 0; i &lt; e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { name: "Jane Doe" },
            { name: "John Snow" },
            { name: "John Doe" }
        ] },
        { name: "John Snow" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].name); // displays "John Snow"
&lt;/script&gt;
</code></pre>

<h4>Example - set filter as disjunction (or)</h4>

<pre><code>&lt;script&gt;
    var dataSource = new kendo.data.HierarchicalDataSource({
          filter: {
            logic: "or",
            filters: [
              { field: "username", operator: "contains", value: "Snow" },
              { field: "name", operator: "contains", value: "John" }
            ]
          },
        change: function(e) {
             for (var i = 0; i &lt; e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { username: "Jane Doe" },
            { username: "John Snow" },
            { username: "John Doe" }
        ] },
        { name: "John Snow" }
        ]
    });

    dataSource.fetch();
    var view = dataSource.view();

    console.log(view.length);// displays 2
    console.log(view[0].name); // displays "Jane Doe"
    console.log(view[0].children.view().length); // displays 1
    console.log(view[0].children.view()[0].username); // displays "John Snow"
&lt;/script&gt;
</code></pre>

<h3 id="configuration-schema">
<a href="#configuration-schema">schema </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The schema configuration. See the <a href="/api/framework/datasource#configuration-schema">DataSource.schema configuration</a> for all available options.</p>

<h3 id="configuration-schema.model">
<a href="#configuration-schema.model">schema.model </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object |</code></a><code>kendo.data.Node</code>
</h3>

<p>The data item (model) configuration. See the <a href="/api/framework/datasource#configuration-schema.model">DataSource.schema.model configuration</a> for all available options.</p>

<blockquote>
<p>The model <strong>must</strong> inherit from <a href="/api/framework/node">kendo.data.Node</a>.</p>
</blockquote>

<h4>Example - use a custom model</h4>

<pre><code>&lt;script&gt;
var CustomNode = kendo.data.Node.define({
  averageRating: function() {
    var movies = this.children.data();
    var rating = 0;

    if (movies.length) {
      $.each(movies, function() { rating += this.rating; });
      rating /= movies.length;
    }

    return rating.toFixed(2);
  }
});

var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi", items: [
      { movieName: "Inception", rating: 8.8 },
      { movieName: "The Matrix", rating: 8.7 }
    ] },
    { categoryName: "Drama", hasAssignedMovies: true }
  ],
  schema: {
    model: CustomNode
  }
});

datasource.read();

var category = datasource.data()[0];
category.load();
console.log(category.averageRating()); // logs 8.75
&lt;/script&gt;
</code></pre>

<h3 id="configuration-schema.model.hasChildren">
<a href="#configuration-schema.model.hasChildren">schema.model.hasChildren </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: false)</em>
</h3>

<p>Specifies whether the model might have children and might be loaded. Applicable when the rendering of a
widget needs to have different states for items that have no children (e.g. the toggle button of the TreeView).</p>

<h4>Example - map the hasChildren field to another field</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi", hasAssignedMovies: false },
    { categoryName: "Drama", hasAssignedMovies: true }
  ],
  schema: {
    model: {
      hasChildren: "hasAssignedMovies"
    }
  }
});

datasource.read();

console.log(datasource.data()[0].hasChildren); // logs false
console.log(datasource.data()[1].hasChildren); // logs true
&lt;/script&gt;
</code></pre>

<h4>Example - compute if an item has children with a function</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi" },
    { categoryName: "Drama" }
  ],
  schema: {
    model: {
      hasChildren: function(item) {
        return item.categoryName != "Drama";
      }
    }
  }
});

datasource.read();

console.log(datasource.data()[0].hasChildren); // logs true
console.log(datasource.data()[1].hasChildren); // logs false
&lt;/script&gt;
</code></pre>

<h4>Example - specify that all items may have children</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { categoryName: "SciFi" },
    { categoryName: "Drama" }
  ],
  schema: {
    model: {
      hasChildren: true
    }
  }
});

datasource.read();

console.log(datasource.data()[0].hasChildren); // logs true
&lt;/script&gt;
</code></pre>

<h3 id="configuration-schema.model.children">
<a href="#configuration-schema.model.children">schema.model.children </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: "items")</em>
</h3>

<p>DataSource object or configuration for fetching child nodes.
Detailed explanation of how children are fetched is found in the <a href="http://docs.telerik.com/kendo-ui/framework/hierarchicaldatasource/overview">HierarchicalDataSource overview help topic</a>.</p>

<blockquote>
<p>Note that "children" cannot be used as a field name. The model already has a children property - the child data source.</p>
</blockquote>

<p>For static HierarchicalDataSource (local data), this field may be a <code>String</code>,
indicating which field holds the nested data.</p>

<h4>Example - specify children field</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    {
      categoryName: "SciFi",
      movies: [
        { title: "Star Wars: A New Hope", year: 1977 },
        { title: "Star Wars: The Empire Strikes Back", year: 1980 },
        { title: "Star Wars: Return of the Jedi", year: 1983 }
      ]
    },
    {
      categoryName: "Drama",
      movies: [
        { title: "The Shawshenk Redemption", year: 1994 },
        { title: "Fight Club", year: 1999 },
        { title: "The Usual Suspects", year: 1995 }
      ]
    }
  ],
  schema: {
    model: {
      children: "movies"
    }
  }
});

datasource.read();

var scifi = datasource.data()[0];
scifi.load();
console.log(scifi.children.data().length); // logs 3
&lt;/script&gt;
</code></pre>

<h4>Example -</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    {
      categoryName: "SciFi",
      movies: [
        { title: "Star Wars: A New Hope", year: 1977, cast: [
            { actor: "Mark Hamill", character: "Luke Skywalker" },
            { actor: "Harrison Ford", character: "Han Solo" },
            { actor: "Carrie Fisher", character: "Princess Leia Organa" }
        ] },
        { title: "Star Wars: The Empire Strikes Back", year: 1980, cast: [
            { actor: "Mark Hamill", character: "Luke Skywalker" },
            { actor: "Harrison Ford", character: "Han Solo" },
            { actor: "Carrie Fisher", character: "Princess Leia Organa" },
            { actor: "Billy Dee Williams", character: "Lando Calrissian" }
        ] }
      ]
    }
  ],
  schema: {
    model: {
      children: { // define options for second level
        schema: {
          data: "movies",
          model: {
            children: "cast" // third level is defined by the field "cast"
          }
        }
      }
    }
  }
});

datasource.read();

var scifi = datasource.data()[0];
scifi.load();
var sw5 = scifi.children.data()[1];
sw5.load();
console.log(sw5.children.data().length); // logs 4
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<p>See the <a href="/api/framework/datasource#methods">DataSource methods</a> for all inherited methods.</p>

<p>The <strong>filter</strong>, <strong>remove</strong> and <strong>getByUid</strong> methods are overridden and work with the hierarchical data
(they will act on all child datasources that have been read).</p>

<h3 id="methods-filter"><a href="#methods-filter">filter</a></h3>

<p>Gets or sets the filter configuration. It applies the filter to all loaded nodes and creates views from the nodes that match the filter and their parent nodes up to the root of the hierarchy. Currently not loaded nodes are not filtered.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(optional)</em>
</h5>

<p>The filter configuration. Accepts the same values as the <a href="#configuration-filter"><code>filter</code></a> option (<strong>check there for more examples</strong>).</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> the current filter configuration. Returns <code>undefined</code> if the DataSource instance has not performed filtering so far.</p>

<h4>Example - set the data source filter</h4>

<pre><code>&lt;script&gt;
        var dataSource = new kendo.data.HierarchicalDataSource({
            change: function(e) {
             for (var i = 0; i &lt; e.items.length; i++) {
                e.items[i].load();
             }
            },
            data: [
            { name: "Jane Doe", items: [
                { name: "Jane Doe" },
                { name: "John Doe" }
            ] },
            { name: "John Doe" }
            ]
        });

        dataSource.fetch();
        dataSource.filter({ field: "name", operator: "startswith", value: "John" });
        var view = dataSource.view();

        console.log(view.length);// displays 2
        console.log(view[0].name); // displays "Jane Doe"
        console.log(view[0].children.view().length); // displays 1
        console.log(view[0].children.view()[0].name); // displays "John Doe"
&lt;/script&gt;
</code></pre>

<h4>Example - get the data source filter</h4>

<pre><code>&lt;script&gt;
    var dataSource = new kendo.data.HierarchicalDataSource({
        filter: { field: "name", operator: "startswith", value: "John" },
        change: function(e) {
             for (var i = 0; i &lt; e.items.length; i++) {
                e.items[i].load();
             }
        },
        data: [
        { name: "Jane Doe", items: [
            { name: "Jane Doe" },
            { name: "John Doe" }
        ] },
        { name: "John Doe" }
        ]
    });

    dataSource.fetch();
    var filter = dataSource.filter();

    console.log(filter.filters[0]); //displays '{field: "name", operator: "startswith", value: "John"}'
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<p>See the <a href="/api/framework/datasource#events">DataSource events</a> for all inherited events.</p>

<blockquote>
<p>Disclaimer: The <a href="/api/framework/datasource#events-push">push</a> event is not currently supported by the <code>HierarchicalDataSource</code>.</p>
</blockquote>

<h3 id="events-change"><a href="#events-change">change</a></h3>

<p>Fires when data is changed. In addition to the <a href="/api/framework/datasource#change">standard change event</a>,
the HierarchicalDataSource includes additional data when the event has been triggered from a child
DataSource.</p>

<h4>Event Data</h4>

<h5>e.node <code>kendo.data.Node</code>
</h5>

<p>If the event was triggered by a child datasource, this field holds a reference to the parent node.</p>

<h4>Example</h4>

<pre><code>&lt;script&gt;
var datasource = new kendo.data.HierarchicalDataSource({
  data: [
    { id: 1, text: "foo", items: [
      { id: 2, text: "bar" }
    ] }
  ],
  change: function(e) {
    console.log(e.node);
  }
});

// logs `undefined`, because the change event is not triggered by a node
datasource.read();

// logs `{ id: 1, text: "foo" }`, because the event is triggered by the root item
datasource.get(1).load();
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

